<template>
  <!-- 勘误查看页面 -->
  <view class="corrigendum_edit">
    <view class="tips" v-if="status == 0">
      <view class="tips_text">
        <image src="@/static/images/tips.png"></image>
        <text>请修改错误的项目信息,并提交</text>
      </view>
    </view>
    <view class="corrigendum_content">
      <view class="header">
        <view class="header_left">
          <view class="name">
            <view>{{ info.name }}</view>
          </view>
        </view>
        <view class="header_right" @click="editLocation">
          <view class="location">
            <image
              src="@/static/images/locations.png"
              class="close"
              style="width: 32rpx; height: 32rpx"
            ></image>
            <view>{{ status > 0 ? "导航" : "修改定位" }}</view>
          </view>
        </view>
      </view>
      <view class="location">
        <view class="content-header-address">
          <view class="address_item">{{
            status == 0 ? oldObj.locationAddress : ""
          }}</view>
        </view>
        <view class="content-header-address">
          <view class="address_item new">{{
            showLocation || status > 0 ? info.locationAddress : ""
          }}</view>
        </view>
      </view>

      <view class="form-content" style="margin-top: 28rpx">
        <view class="form-item address">
          <view class="left">
            <text>*</text>
            地址
          </view>
          <view class="right">
            <input
              placeholder="请输入地址"
              v-model="info.address"
              @bindfocus="showAddress = false"
              @blur="showAddress = true"
              :disabled="status > 0"
            />
          </view>
        </view>
        <view class="form-item" @click="showPicker('type')">
          <view class="left">
            <text v-if="status == 0">*</text>
            项目类型
          </view>
          <view class="right">
            {{ typeList[info.type] || "请选择" }}
            <!-- <picker
            @change="bindPickerChange"
            :value="info.type"
            :range="typeList"
          >
            <view class="picker">{{ typeList[info.type] || "请选择" }}</view>
          </picker> -->
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
        </view>
        <view class="form-item">
          <view class="left">
            <text v-if="status == 0">*</text>
            项目联系人
          </view>
          <view class="right">
            <input
              type="text"
              :disabled="status > 0"
              v-model="info.contactsName"
            />
          </view>
        </view>
        <view class="form-item">
          <view class="left">
            <text v-if="status == 0">*</text>
            项目联系电话
          </view>
          <view class="right">
            <input
              type="number"
              v-model="info.phone"
              maxlength="11"
              @input="changePhone($event)"
            />
          </view>
        </view>
        <view :class="['form-item',status==0?'':'noBorder']">
          <view class="left">梯数</view>
          <view class="right">{{ eleNum }}</view>
        </view>
        <view class="form-item noBorder" v-if="status == 0">
          <view class="left">实际梯数</view>
          <view class="count" style="width: 218rpx">
            <view
              @click="handleSubtraction"
              style="border-radius: 4rpx 0rpx 0rpx 4rpx"
              >-</view
            >
            <input type="text" :disabled="true" v-model="total" />
            <view @click="handleAdd" style="border-radius: 0rpx 4rpx 4rpx 0rpx"
              >+</view
            >
          </view>
        </view>
      </view>
      <view class="form-content">
        <view class="form-item" @click="showAlias">
          <view class="left">项目别名</view>
          <view class="right" v-if="info.buildingExt.relationAliases">
            <view class="aliasNames"> {{ relationAliasNames }}</view>
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
          <view class="right" v-else>
            <view class="empty"> 暂无别名 </view>
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
        </view>
        <view class="addNotice">
          <view class="addNotice-title">项目备注</view>
          <view class="addNotice_content">
            <textarea
              v-model="info.buildingExt.buildingRemark"
              placeholder="请输入项目备注"
              placeholder-style="color:#ccc"
              maxlength="300"
              :disabled="status > 0"
              style="height: 220rpx"
            />
            <view class="lenthTips">
              <text
                >{{
                  info.buildingExt.buildingRemark == null
                    ? 0
                    : info.buildingExt.buildingRemark.length
                }}{{ "/" + 300 }}</text
              >
            </view>
          </view>
        </view>
        <view class="form-item img_item noBorder">
          <view class="left"
            >项目图片
            <text>(最多不超过3张)</text>
          </view>
          <view class="imgBox">
            <!-- <image
              @click="previewImg(index)"
              class="imgItem"
              v-for="(img, index) in info.buildingImages"
              :key="index"
              :src="img"
            >
            </image> -->
            <imageDragSort 
              :list="imgList"
              @changeList="changeImg"
              :disabled="status > 0"
              :max="3"
            ></imageDragSort>
          </view>
        </view>
      </view>
      <!-- 停车信息 -->
      <view class="form-content">
        <view class="form-item" @click="showPicker('parkingSpot')">
          <view class="left">停车位信息</view>
          <view class="right">
            {{
              ["未知", "有停车位", "无停车位"][info.buildingExt.parkingSpot] ||
              "请选择"
            }}
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
        </view>
        <view class="form-item" @click="showPicker('maintainPersonnel')">
          <view class="left">保养人数要求</view>
          <view class="right">
            {{
              ["未知", "2人", "2人以上"][info.buildingExt.maintainPersonnel] ||
              "请选择"
            }}
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
        </view>
      
        <view class="form-item" @click="showPicker('stagnationPoint')">
          <view class="left">驻点要求</view>
          <view class="right">
            {{ ["", "不限", "需驻点"][info.buildingExt.stagnationPoint] }}
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
        </view>
        <view class="form-item noBorder" @click="showPicker('makeAppointment')">
          <view class="left">预约要求</view>
          <view class="right">
            {{ ["不限", "需要预约"][info.buildingExt.makeAppointment] }}
            <uni-icons color="#ccc" size="18" type="arrowright" />
          </view>
        </view>
      </view>
      <view class="form-content">
        <view class="addNotice noBorder">
          <view class="addNotice-title">补充信息</view>
          <view class="addNotice_content">
            <textarea
              v-model="info.remark"
              placeholder="请输入需要补充的其他信息"
              placeholder-style="color:#ccc"
              maxlength="300"
              style="height: 220rpx"
              :disabled="status > 0"
            />
            <view class="lenthTips">
              <text
                >{{ info.remark ? info.remark.length : 0 }}{{ "/" + 300 }}</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view :class="['save']">
      <view @click="handleCancel" :class="['cancel']" v-if="status==0">
        取消
      </view>
      <view @click="handleSave" :class="['comfire',status > 0 ? 'disable' : '']">{{
        status == 0 ? "提交" : "已提交,待审核"
      }}</view>
    </view>
    <!-- 别名弹出框 -->
    <!-- <uni-popup ref="alias-popup" type="bottom">
      <alias ref="alias" @comfireAlias="comfireAlias"></alias>
    </uni-popup> -->
    <aliasPopup
      :showAlias="popupShow"
      @closedMask="closedMask"
      aliasType="edit"
    >
    <template slot="alias">
      <alias ref="alias" @comfireAlias="comfireAlias"></alias>
    </template>
   
    </aliasPopup>
    <!-- picker弹出框 -->
    <uni-popup ref="selectPicker-popup" type="bottom">
      <selectpicker
        ref="selectPicker"
        @close="closeSelectPicker"
        @comfire="comfireSelectPicker"
      ></selectpicker>
    </uni-popup>
  </view>
</template>

<script>
import aliasPopup from '@/components/card-dial/aliasPopup.vue';
import alias from '../corrigendum/components/alias.vue';
import selectpicker from '../corrigendum/components/select-picker.vue';
import { projectDetail, addDetail } from '@/apis/project.js';
import { mapState, mapActions } from 'vuex';
import imageDragSort from '@/components/image-drag-sort/index.vue';
import amapFile from '../../utils/amap-wx.js';
import { isMobile } from '@/utils/utils.js';
export default {
	components: {
		alias,
		selectpicker,
		imageDragSort,
		aliasPopup
	},
	props: {
		typeList: {
			type: Array,
		},
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	data() {
		return {
			// inputDisable: false,
			info: {
				buildingExt: {},
			},
			total: 0,
			relationAliasNames: '', // 别名字符串
			status: 0,
			imgList: [],
			showLocation: false,
			eleNum: 0,
			oldObj: {},
			popupShow:false

		};
	},
	created() {
		this.handleRreshToken();
	},
	methods: {
		handleCancel() {
			this.$emit('toView');
		},
		changePhone(e) {
			//   console.log(e);
			const inputTypeNum = /[^\d]/g; // 数字
			this.$nextTick(() => {
				this.info.phone = e.target.value.replace(inputTypeNum, '');
			});
		},
		...mapActions('user', ['handleRreshToken']),
		// 修改定位
		editLocation() {
			if (this.status > 0) {
				return;
			} else {
				uni.chooseLocation({
					success: (res) => {
						// console.log("位置名称：" + res.name);
						// console.log("详细地址：" + res.address);
						// console.log("纬度：" + res.latitude);
						// console.log("经度：" + res.longitude);
						this.info.latitude = res.latitude;
						this.info.longitude = res.longitude;
						this.getAddress();
						this.info.locationAddress = res.address + res.name;
						this.showLocation = true;
					},
					fail: (fail) => {
						console.log(fail, '失败');
					},
				});
			}
		},
		// 反查地址
		getAddress() {
			var myAmapFun = new amapFile.AMapWX({
				key: 'e02bf0709360ff81bd0b6bdf7cc9762e',
			});
			myAmapFun.getRegeo({
				location: `${this.info.longitude},${this.info.latitude}`,
				success: (res) => {
					console.log(res[0].regeocodeData, '成功');
					this.info.provinceName =
            res[0].regeocodeData.addressComponent.province;
					this.info.cityName = res[0].regeocodeData.addressComponent.city;
					this.info.adName = res[0].regeocodeData.addressComponent.township;
					// console.log(this.provinceName,this.cityName,this.adName,3333)
				},
				fail: (res) => {
					console.log(res, '完成');
				},
			});
		},
		changeImg(res) {
			this.imgList = res;
		},

		handleSave() {
			console.log('提交数据');
			if (this.status > 0) {
				return;
			}

			// return

			this.info.buildingExt.buildingImg = this.imgList.join(',');
			const { buildingExt, ...other } = this.info;
			// console.log(other, "除了扩展表的数据");
			const {
				buildingImg,
				buildingRemark,
				parkingSpot,
				maintainPersonnel,
				makeAppointment,
				stagnationPoint,
				relationAliases,
			} = this.info.buildingExt;
			const params = {
				...other,
				submitId: this.userinfo.user_id,
				buildingExt: {
					relationAliases,
					buildingImg,
					buildingRemark,
					parkingSpot,
					maintainPersonnel,
					makeAppointment,
					stagnationPoint,
				},
			};
			console.log(params, '请求参数');
			// return;
			uni.showModal({
				confirmColor: '#0091ff',
				title: '提示',
				content: '是否确认提交勘误',
				success: (res) => {
					if (res.confirm) {
						// console.log(this.checkForm);
						// if (!this.checkForm) {
						//   uni.showToast({
						//     title: "数据未修改",
						//     icon: "none",
						//   });
						//   return;
						// }
						if (
							!this.info.phone ||
              !this.info.contactsName ||
              !this.info.type ||
              !this.info.address
						) {
							uni.showToast({
								title: '信息未完整',
								icon: 'none',
							});
							return;
						}
						if (isMobile(this.info.phone)) {
							uni.showToast({
								title: '请输入正确手机号码!',
								icon: 'none',
							});
							return;
						} else {
							// console.log('可以提交')
							// return
							uni.showLoading({
								title: '提交中',
							});
							this.info.eleTotal = this.total;
							// this.info.imgUrl = this.imgBoxList;

							addDetail({
								...params,

								// buildingId: this.in,
							}).then((res) => {
								if (res) {
									uni.hideLoading();
									// this.info = res.data.buildingSubmitVO;

									this.status = res.data.approveStatus;
									this.total = this.info.eleTotal;
									// this.init(this.info);
								}
							});
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
		},
		// 打开picker对话框
		showPicker(key) {
			// 如果status==1 不允许修改
			if (this.status > 0) {
				return;
			}
			let typeArr = this.typeList.slice(1);
			let pickerMap = {
				type: {
					list: typeArr,
					title: '类型',
					name: 'type',
					value: this.info.type - 1,
				},
				parkingSpot: {
					list: ['未知', '有停车位', '无停车位'],
					title: '停车位信息',
					name: 'parkingSpot',
					value: this.info.buildingExt.parkingSpot,
				},
				maintainPersonnel: {
					list: ['未知', '2人', '2人以上'],
					title: '保养人数要求',
					name: 'maintainPersonnel',
					value: this.info.buildingExt.maintainPersonnel,
				},
				makeAppointment: {
					list: ['不限', '需要预约'],
					title: '预约要求',
					name: 'makeAppointment',
					value: this.info.buildingExt.makeAppointment,
				},
				stagnationPoint: {
					list: ['不限', '需驻点'],
					title: '驻点要求',
					name: 'stagnationPoint',
					value: this.info.buildingExt.stagnationPoint - 1,
				},
			}; 
			this.$refs['selectPicker-popup'].open();
     
			this.$nextTick(() => { 
				setTimeout(() => {
					this.$refs.selectPicker.init(pickerMap[key]);
				}, 100);
			});
		},
		// 关闭确认对话框
		closeSelectPicker() {
			this.$refs['selectPicker-popup'].close();
		},
		// 确定picker对话框
		comfireSelectPicker(data) {
			// 如果是驻点或者类型需要特殊处理
			if (data.key == 'type') {
				console.log(data);
				this.info.type = data.val + 1;
			} else if (data.key == 'stagnationPoint') {
				this.info.buildingExt.stagnationPoint = data.val + 1;
			} else {
				this.info.buildingExt[data.key] = data.val;
			}

			this.$refs['selectPicker-popup'].close();
		},
		// 项目别名对话框
		showAlias() {
			if (this.status > 0) {
				return;
			}
			this.popupShow = true;
			this.$refs.alias.init(this.info.buildingExt.relationAliases);
			this.$emit('stopScroll');
			// this.$nextTick(() => {
			//   this.$refs["alias-popup"].open();
			//   this.$refs.alias.init(this.info.buildingExt.relationAliases);
			// });
		},
		closedMask() {
			this.popupShow = false;
			this.$emit('canScroll');
		},
		// 增加梯数
		handleAdd() {
			this.total = this.total + 1;
		},
		// 减少梯数
		handleSubtraction() {
			if (this.total < 2) {
				uni.showToast({
					title: '电梯数量不能少于1',
					icon: 'none',
				});
				return;
			}
			this.total = this.total - 1;
		},
		changePhone() {
			const inputTypeNum = /[^\d]/g; // 数字
			this.$nextTick(() => {
				this.info.phone = e.target.value.replace(inputTypeNum, '');
			});
		},
		init(data, oldObj) {
			let relationAliasNames = data.buildingExt.relationAliases
				.map((item) => {
					return item.alias;
				})
				.join(',');
			this.relationAliasNames = relationAliasNames.replaceAll(',', ';');

			this.info = JSON.parse(JSON.stringify(data));
			this.imgList = this.info.buildingImages || [];
			this.oldObj = oldObj;
			this.total = data.eleTotal;

			// 如果修改后
			if (this.status > 0) {
				this.total = data.eleTotal;
			} else {
				this.eleNum = data.eleTotal;
			}
		},
		// 获取别名对话框的内容
		comfireAlias(list) {
			this.relationAliasNames = list
				.map((item) => item.alias)
				.join(',')
				.replaceAll(',', ';');
			// this.info.relationAlias = list;
			this.info.buildingExt.relationAliases = list;
			console.log(this.info.buildingExt.relationAliases, '删除之后');
			// this.$refs["alias-popup"].close();
			this.popupShow = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.corrigendum_edit {
  padding-bottom: 100rpx;
  .tips {
    color: #ff7505;

    .tips_text {
      display: flex;
      align-items: center;
    }

    display: flex;
    padding: 0 20rpx;
    justify-content: space-between;
    background: #fffadf;
    height: 80rpx;
    align-items: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    .close {
      padding: 30rpx 0 30rpx 30rpx;
    }
  }
  .corrigendum_content {
    padding: 0 20rpx;
  }
  .header {
    display: flex;
    padding: 34rpx 10rpx 12rpx 18rpx;
    // background: #fff;
    .header_left {
      width: 454rpx;

      .name {
        color: #333;
        font-weight: 600;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 12rpx;
        }
        view {
          width: 544rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .address {
        width: 100%;
        // padding-left: 60rpx;
        color: #999;
        font-size: 24rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .header_right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      font-size: 24rpx;
      color: #666;
      flex-direction: column;
      align-items: flex-end;
    }
  }
  .location {
    padding: 0rpx 10rpx 0rpx 18rpx;
    display: flex;
    justify-content: flex-end;
    color: #999999;
    font-size: 24rpx;
    .content-header-address {
      display: flex;
      flex: 1;
    }
    .new {
      color: #ff7505;
      text-align: right;
    }
  }
  .conte {
    padding-bottom: 40rpx;
  }
  .modelItem {
    display: flex;
    justify-content: center;
    color: #999;
  }
  .call {
    font-size: 30rpx;
    color: #000;
    // opacity: 0.9;
    margin-bottom: 16rpx;
    font-weight: 600;
  }
  .form-content {
    width: 710rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 0rpx 0 20rpx 0;
    padding: 0 20rpx;
    border-radius: 8rpx;
    margin-top: 16rpx;
    .address {
      textarea {
        min-height: 60rpx;
        width: 100%;
        height: 100rpx;
        align-items: center;
        display: flex;
        align-items: center;
        text-align: right;
      }
    }
    .form-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding: 40rpx 0rpx;

      border-bottom: 2rpx solid #e9e9e9;
      font-size: 28rpx;

      .unit {
        margin-left: 4rpx;
      }

      .left {
        height: 78rpx;
        font-size: 28rpx;
        color: #333;
        width: 190rpx;
        display: flex;
        align-items: center;
        text {
          color: red;
          padding: 5rpx;
        }

        image {
          width: 28rpx;
          height: 28rpx;
          margin-left: 10rpx;
        }
      }
      .right {
        height: 78rpx;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        color: #666;
        picker {
          width: 100%;
          display: flex;
          height: 100%;
          justify-content: flex-end;
          align-items: center;
        }
        view {
          text-align: right;
        }
        .empty {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        input {
          width: 100%;
          height: 100%;
          text-align: right;
        }
        .emptyImg {
          color: #ccc;
        }
        .phone {
          width: 32rpx;
          height: 32rpx;
        }
        .aliasNames {
          width: 428rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .imgBox {
        display: flex;
        image {
          width: 128rpx;
          height: 128rpx;
          // margin-right: 16rpx;
        }
      }
      .count {
        width: 218rpx !important;
        display: flex;
        height: 118rpx;
        align-items: center;
        justify-content: flex-end;
        input {
          display: flex;
          flex: 1;
          text-align: center;
          box-sizing: border-box;
          height: 60rpx;
          border-top: 2rpx solid #d3dbe1;
          border-bottom: 2rpx solid #d3dbe1;
        }
        view {
          display: flex;
          width: 60rpx;
          height: 60rpx;
          color: #828e96;
          align-items: center;
          box-sizing: border-box;
          justify-content: center;
          background: #f3f6f8;
          border: 2rpx solid #d3dbe1;
          // border-radius: 4rpx 0rpx 0rpx 4rpx;
        }
      }
    }
    .img_item {
      flex-direction: column;
      align-items: flex-start;
      padding-bottom: 16rpx;
      .left {
        width: 100%;
        display: flex;
      }
      text {
        color: #999 !important;
        font-size: 26rpx;
      }
    }
    // .addNotice {
    //   display: flex;
    //   flex-direction: column;
    //   .addNotice-title {
    //     width: 100%;
    //     align-items: flex-start;
    //     padding: 20rpx 0 28rpx 0;
    //     color: #999999;
    //   }
    //   .border {
    //     border: 2rpx solid #e9e9e9;
    //   }

    //   .imgBox {
    //     padding-bottom: 40rpx;
    //     margin: 0 20rpx;
    //     width: 100%;
    //     image {
    //       width: 112rpx;
    //       height: 112rpx;
    //       // border: 1rpx solid #ccc;
    //       margin-right: 18rpx;
    //     }
    //     textarea {
    //       width: 630rpx;
    //       margin: 20rpx;
    //     }
    //     .lenthTips {
    //       margin-right: 20rpx;
    //       color: #ccc;
    //       // width: 100%;
    //       display: flex;
    //       justify-content: flex-end;
    //     }
    //   }
    // }
    .noBorder {
      border: none !important;
    }
    .addNotice {
      display: flex;
      flex-direction: column;
      border-bottom: 2rpx solid #e9e9e9;

      .addNotice-title {
        width: 100%;
        align-items: flex-start;
        padding: 20rpx 0 28rpx 0;
        color: #333;
      }
      .addNotice_content {
        border: 2rpx solid #e9e9e9;
        margin-bottom: 20rpx;
        textarea {
          width: 630rpx;
          margin: 20rpx;
        }
        .lenthTips {
          margin-right: 20rpx;
          color: #999;
          display: flex;
          // width: 100%;
          justify-content: flex-end;
          // padding: 16rpx 0;
          padding-bottom: 16rpx;
        }
      }
      .border {
        border: 2rpx solid #e9e9e9;
      }

      .imgBox {
        padding-bottom: 40rpx;
        margin: 0 20rpx;
        width: 100%;
        image {
          width: 112rpx;
          height: 112rpx;
          // border: 1rpx solid #ccc;
          margin-right: 18rpx;
        }
      }
    }
  }
  .save {
    display: flex;
    justify-content: center;
    padding: 14rpx 20rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 50;
    border-top: 2rpx solid #eee;
    display: flex;

    view {
      // width: 710rpx;
      flex: 1;
      background: #0091ff;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      color: #fff;
    }
    .cancel{
      border-radius: 8rpx 0 0 8rpx;
      color: #0091ff;
      background: #f5fbff;
    }
    .comfire{
      border-radius: 0rpx 8rpx 8rpx 0rpx;
    }
    .disable {
      background-color: #efefef;
      color: #cccccc;
      border-radius: 8rpx;
    }
  }
}
</style>
